<template>
  <div>
    <h3>换相器列表</h3>
    <x-button type="primary" @click.native="back">返回</x-button>
    <group>
      <card>
        <div slot="content" class="card-flex card-content">
          <div class="vux-1px-r">
            归属地：
            <br />
            <span>{{location}}</span>
          </div>
          <div>
            台区号：
            <br />
            <span>{{areaNo}}</span>
          </div>
        </div>
      </card>
    </group>
    <group>
      <el-table :data="data" border stripe fit style="width: 100%;font-size: 13px;padding: 0;" :header-cell-style="tableHeader" :cell-style="tableCell">
        <el-table-column fixed prop="machineNo" label="换相器号">
        </el-table-column>
        <el-table-column label="支路">
          <template slot-scope="scope">
            <span>{{scope.row.track}}支路</span>
          </template>
        </el-table-column>
        <el-table-column label="激活状态">
          <template slot-scope="scope">
            <span v-if="scope.row.activeStatus==0">未激活</span>
            <span v-if="scope.row.activeStatus==1">已激活</span>
          </template>
        </el-table-column>
        <el-table-column label="电流限值">
          <template slot-scope="scope">
            <span>{{scope.row.iLimit}}A</span>
          </template>
        </el-table-column>
        <el-table-column prop="installAddress" label="安装地点">
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button v-if="scope.row.activeStatus==0" @click="enable(scope.row)" type="text" style="font-size:17px;">激活</el-button>
            <el-button v-if="scope.row.activeStatus==1" @click="enable(scope.row)" type="text" style="font-size:17px;">禁用</el-button>
            <el-button @click="toEditMachine(scope.row)" type="text" style="font-size:17px;border-top:1px solid ##034b7a;">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </group>
    <loading :show="showLoading" text="加载中..."></loading>
  </div>
</template>

<script>
import { Group, XButton, Card, Loading } from "vux";
import Http from "./../unit/http.js";

export default {
  components: {
    Group,
    XButton,
    Card, Loading
  },
  data() {
    return {
      showLoading:false,
      id: 0,
      location: "",
      areaNo: "",
      data: []
    };
  },
  mounted() {
    this.getId();
  },

  watch:{
    data:function(){
      this.showLoading = false
    }
  },

  methods: {
    getId() {
      this.id = this.$route.query.id;
      this.getData(this.id);
    },

    getData(id) {
      this.showLoading = true;
      const self = this;
      const param = { areaId: id };
      const url = "/yitai/admin/machine";
      const success = function(response) {
       
        self.data = response.data.info;
        self.location = response.data.info[0].location;
        self.areaNo = response.data.info[0].areaNo;
      };
      const failed = function() {
        
      };
      Http.http(url, param, success, failed);
    },

    back() {
      this.$router.go(-1);

    },

    enable(row) {
      this.showLoading = true;
      const self = this;
      const param = { id: row.id };
      const url = "/yitai/admin/activeMachine";
      const success = function(response) {
       
        const status = response.data.status
        if(status == 500){

          for (let i = 0; i < self.data.length; i++) {
            if (self.data[i].id == row.id) {
              if (self.data[i].activeStatus == 0) {
                self.data[i].activeStatus = 1;
                self.showLoading = false;
              } else {
                self.data[i].activeStatus = 0;
                self.showLoading = false;
              }
            }
          }

        }
      };
      const failed = function(response) {
        
      };
      Http.http(url, param, success, failed);
    },

    toEditMachine(row) {
      const id = row.id;
      this.$router.push({ path: "/editMachine", query: { id: id } });
    },

    //elementui的表格样式
    tableHeader({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "color: #242424;text-align:center;font-size:14px;";
      }
    },
    tableCell({ row, column, rowIndex, columnIndex }) {
      return "padding:0;text-align:center;color: #242424;font-size:17px;";
    }
  }
};
</script>

<style scoped >
h3 {
  margin-bottom: 20px;
}
button.weui-btn {
  font-size: 18px;
}
.weui-btn_primary {
  background-color: #005e9c;
}
.weui-btn_primary:not(.weui-btn_disabled):active {
  color: rgba(255, 255, 255, 0.6);
  background-color: #034b7a;
}
.weui-btn_disabled.weui-btn_primary {
  background-color: #3978a1;
}

.card-flex {
  display: flex;
}
.card-content {
  padding: 10px 0;
}
.card-padding {
  padding: 15px;
}
.card-flex > div {
  flex: 1;
  text-align: center;
  font-size: 18px;
  display: flex;
  justify-content: center;
}
.card-flex span {
  color: #005e9c;
}
.vux-1px-r:after {
  border-right: 1px solid #005e9c !important;
}

.el-button + .el-button {
  margin-left: 3px;
}
</style>